<script setup lang="ts">
  import { useUserStore } from '@/store';
  import { getcompanylist } from '@/api/enterlibery';
  const router = useRouter();
  defineOptions({
    name: 'companyList',
  });
  const searchForm = ref({
    gsmc: '',
    province_id: '',
    city_id: '',
    page_no: '1',
    page_size: '15',
  });
  const list = ref();
  onMounted(() => {
    getList();
  });

  const userStore = useUserStore();
  const handleSubmit = (data: any) => {};

  const getList = () => {
    getcompanylist({
      ...searchForm.value,
    }).then((res) => {
      list.value = res.data;
    });
  };
  const handleToPage = (item: any) => {
    router.push({
      path: '/ai/policy/policycompanydetail',
      query: {
        id: item,
      },
    });
  };

  function resetGetlist() {
    searchForm.value = {
      gsmc: '',
      province_id: '',
      city_id: '',
      page_no: '1',
      page_size: '15',
    };
    getList();
  }

  const colors = ['#73A2E6', '#E8A45F', '#AE9EE5', '#73c1a0'];
  let shuffledColors = [...colors];
  let currentIndex = 0;
  function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }
  function getUniqueRandomColor() {
    // 当所有颜色都被使用后，重新洗牌
    if (currentIndex >= shuffledColors.length) {
      shuffledColors = shuffleArray([...colors]);
      currentIndex = 0;
    }

    return shuffledColors[currentIndex++];
  }

  //
</script>

<template>
  <div>
    <a-row class="componentPage">
      <a-col :span="24" class="conetnetBox">
        <a-form :model="searchForm" style="width: 100%" @submit="handleSubmit">
          <a-row>
            <a-col :span="6">
              <a-form-item field="gsmc" label="企业名称">
                <a-input
                  :style="{ width: '320px' }"
                  placeholder="请输入关键字查询"
                  search-button
                  v-model="searchForm.gsmc"
                >
                </a-input> </a-form-item
            ></a-col>
            <a-col :span="6">
              <a-form-item field="province_id" label="省份">
                <a-select
                  v-model="searchForm.province_id"
                  placeholder="请选择"
                  allow-clear
                >
                  <a-option
                    v-for="(item, index) in userStore.allProvice"
                    :value="item.id"
                    >{{ item.name }}</a-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="6">
              <a-form-item>
                <a-button html-type="submit" @click="resetGetlist">
                  <template #icon> <icon-sync /></template>
                  <!-- Use the default slot to avoid extra spaces -->
                  <template #default>重置</template>
                </a-button>
                <a-button html-type="submit" type="primary" @click="getList">
                  <template #icon>
                    <icon-search />
                  </template>
                  <!-- Use the default slot to avoid extra spaces -->
                  <template #default>查询</template>
                </a-button></a-form-item
              ></a-col
            >
          </a-row>
        </a-form>
      </a-col>
    </a-row>
    <a-row class="conetnetBox">
      <a-list style="padding: 20px; width: 100%" :bordered="false" v-if="list">
        <a-list-item v-for="(item, index) in list.list" :key="index">
          <div class="itembox">
            <div
              class="image"
              :style="{
                background: getUniqueRandomColor(),
              }"
              ><icon-bar-chart class="icon"
            /></div>
            <div class="rightContent">
              <div class="line1" @click="handleToPage(item.company_id)">
                <div class="title">{{ item.gsmc }} </div>
                <div class="tag">存续</div>
              </div>
              <div class="line2">
                <div class="qiyeitem"> 企业资质： <span>0</span>项 </div>
                <div class="qiyeitem"> 项目补贴： <span>0</span>项</div>
              </div>
              <div class="tags">
                <!-- 行业-->

                <div>
                  <a-tag
                    v-for="(item, index) in item.qylx"
                    :key="index"
                    class="tagitem"
                    color="purple"
                    style="margin-bottom: 10px"
                    >{{ item }}</a-tag
                  >
                  <div class="">
                    <a-tag
                      v-for="(item, index) in item.hy"
                      :key="index"
                      class="tagitem"
                      color="arcoblue"
                      >{{ item }}</a-tag
                    >
                  </div>
                </div>
              </div>
              <div class="line3">
                <div class="line3-first">
                  <div>法定代表人：{{ item.frdb || '-' }}</div>
                  <div>注册资本：{{ item.zczb || '-' }}万元</div>
                  <div>成立时间 ：{{ item.clrq || '-' }}</div>
                  <div>统一社会信用代码 ：{{ item.tyshxydm || '-' }}</div>
                </div>
                <div class="line3-second">
                  企业地址：{{ item.zcdz || '-' }}</div
                >
              </div>
            </div>
          </div>
        </a-list-item>
        <div class="pagination">
          <a-pagination
            :total="list.total"
            :current="Number(searchForm.page_no)"
            show-jumper
          />
        </div>
      </a-list>
    </a-row>
  </div>
</template>

<style scoped lang="less">
  .itembox {
    display: flex;
    flex-direction: row;
    width: 100%;
    .image {
      height: 70px;
      width: 70px;
      border-radius: 7px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      background: #73c1a0;
      .icon {
        color: #ffffff;
        font-size: 45px;
      }
    }
    .rightContent {
      .line1 {
        display: flex;
        flex-direction: row;
        align-items: center;
        .tag {
          font-size: 14px;
          padding: 0 8px;
          border-radius: 2px;
          line-height: 22px;
          border: 1px solid #56b85c;
          color: #2cab3a;
          display: inline-block;
          font-weight: normal;
          margin-left: 10px;
        }
      }
      .line2 {
        display: flex;
        flex-direction: row;
        align-items: center;
        > div {
          margin-right: 20px;
          margin-top: 10px;
          color: #999;
          font-size: 14px;
          cursor: pointer;
          &:hover {
            color: #3677f6;
          }
        }
        span {
          color: #3677f6;
        }
      }
      margin-left: 15px;
      .title {
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
        &:hover {
          color: #165dff;
        }
      }
    }
  }
  .componentPage {
    background-color: #f2f3f5;
    .conetnetBox {
      background: #fff;
      padding: 20px;
      box-sizing: border-box;
      margin-bottom: 10px;
    }
  }
  .tags {
    > div {
      margin-top: 10px;
      .tagitem {
        margin-right: 10px;
      }
    }
  }
  .line3 {
    color: #6d6d6d;
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
    margin-top: 8px;
    > div {
      margin-bottom: 2px;
    }
    .line3-first {
      display: flex;
      flex-direction: row;
      align-items: center;
      > div {
        margin-right: 50px;
      }
    }
  }
  .pagination {
    width: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
</style>
